<template>
    <view
      class="content"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        :style="{
          height: statusBarHeight + 'px',
        }"
      >
      </view>
      <!-- 头部 -->
      <view
        class="head"
        :style="{
          top: statusBarHeight + 'px',
          background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
        }"
      >
        <view class="head_left">
          <u-icon
            name="arrow-left"
            color="#EEEEEE"
            size="24"
            :bold="true"
            @click="toBack"
          ></u-icon>
        </view>
        <view class="text">现金明细</view>
      </view>
  
      <view class="box">
        <view class="date" @click="show = true">
          {{ y }}年{{ m < 10 ? "0" + m : m }}月{{ d < 10 ? "0" + d : d }}日
          <u-icon name="arrow-down" color="#666666" size="15"></u-icon>
        </view>
        <view
          class="box_scroll"
          :style="{
            height: scrollHeight + 'px',
          }"
        >
          <view class="box_item" v-for="item in 10">
            <view class="box_item_left">
              <view class="box_item_title">积分兑换人民币</view>
              <view class="box_item_time">2023年09月06日 11：53：14</view>
            </view>
            <view class="box_item_right" v-show="true">+1</view>
            <view class="box_item_right box_item_right1" v-show="false">-100</view>
          </view>
          <view class="noMall">没有更多了</view>
        </view>
      </view>
  
      <!-- 时间选择器 -->
      <u-datetime-picker
        :show="show"
        v-model="value"
        mode="date"
        :formatter="formatter"
        @confirm="confirm"
        @cancel="cancel"
      ></u-datetime-picker>


      <floatingBall></floatingBall>
    </view>
  </template>
                
    <script>
  import helper from "@/common/helper.js";
  export default {
    components: {},
  
    data() {
      return {
        statusBarHeight: 0,
        height: 0,
        isHeadBack: false,
        scrollHeight: 0,
        show: false,
        value: Number(new Date()),
        y: "",
        m: "",
        d: "",
      };
    },
    created() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      const windowHeihgt = statusBarHeight.windowHeight;
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
          })
          .exec();
      });
  
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".head").fields({
          size: true,
        });
        query.select(".date").fields({
          size: true,
        });
  
        query.exec((data) => {
          let sum = 0;
          data.forEach((item) => {
            sum += item.height;
          });
          this.scrollHeight = windowHeihgt - sum - 52;
        });
      });
  
      const today = helper.djsFull(Date.now());
      this.y = today.y;
      this.m = today.m;
      this.d = today.d;
    },
  
    methods: {
      toBack() {
        uni.navigateBack({
          delta: 1,
        });
      },
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        if (type === "day") {
          return `${value}日`;
        }
        return value;
      },
      confirm(value) {
        const today = helper.djsFull(value.value);
        console.log(today.m, "33333333");
        this.y = today.y;
        this.m = today.m;
        this.d = today.d;
        this.show = false;
      },
      cancel() {
        this.show = false;
      },
    },
  };
  </script>
                
    <style scoped lang="scss">
  .content {
    background: #111111;
    box-sizing: border-box;
    // background: url("/static/images/my/pic_wdjf_bwijing.png") no-repeat;
    // background-size: 100% auto;
    // background-attachment: fixed;
    z-index: -10;
    display: flex;
    flex-direction: column;
  }
  
  .head {
    width: 100%;
    padding: 18rpx 30rpx 47rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 99;
    background: #ffffff;
    .head_left {
      position: absolute;
      left: 30rpx;
    }
  
    .head_right {
      position: absolute;
      right: 30rpx;
      color: #55b877;
      font-size: 30rpx;
    }
  
    .text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }
  }
  .box {
    padding: 30rpx 60rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .date {
      width: 319rpx;
      height: 72rpx;
      border-radius: 36rpx;
      border: 1rpx solid #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #ffffff;
      .u-icon {
        margin-left: 20rpx;
        position: relative;
        top: 3rpx;
      }
    }
    .box_scroll {
      box-sizing: border-box;
      overflow-y: scroll;
      margin-top: 32rpx;
      .box_item {
        background: #272727;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
        padding: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box_item_left {
          flex: 1;
          .box_item_title {
            font-size: 30rpx;
            color: #ffffff;
          }
  
          .box_item_time {
            margin-top: 16rpx;
            color: #666666;
            font-size: 26rpx;
          }
        }
        .box_item_right{
          color: #55B877;
        }
        .box_item_right1{
          color: #EE6060;
  
        }
      }
      .noMall {
        font-size: 26rpx;
        color: #888888;
        margin: 32rpx 0;
        text-align: center;
      }
    }
  }
  </style>